<template>
  <view class="bg-[#f5f5f5] min-h-screen flex flex-col pb-10">
    <!-- 顶部区域 -->
    <view class="bg-gradient-to-r from-[#165DFF] to-[#1890ff] text-white rounded-b-[32rpx] p-[32rpx] shadow-md">
      <view class="flex justify-between items-center mb-[24rpx]">
        <view class="flex items-center" @click="handleBack">
          <IconFont name="arrow-left" class="text-[36rpx] mr-[16rpx]" />
        </view>
        <text class="text-[36rpx] font-bold flex-1 text-center">推广统计中心</text>
        <view class="flex items-center">
          <view class="w-[56rpx] h-[56rpx] rounded-full bg-white text-[#165DFF] flex items-center justify-center font-bold text-[28rpx] mr-[12rpx]">张</view>
          <view class="flex flex-col items-end">
            <text class="text-[26rpx] font-bold">张推广员</text>
            <text class="text-[22rpx] opacity-80">ID: PG2025001</text>
          </view>
        </view>
      </view>
      <view class="flex gap-x-[20rpx] mt-[8rpx]">
        <view class="flex-1 bg-white rounded-[24rpx] shadow-md p-[24rpx] flex flex-col items-center cursor-pointer" @click="handleCardClick('personal')">
          <IconFont name="user-friends" class="text-[64rpx] text-[#165DFF] mb-[8rpx]" />
          <text class="text-[26rpx] text-[#333] mb-[4rpx]">个人端会员</text>
          <text class="text-[30rpx] font-bold text-[#165DFF] mb-[4rpx]">128人</text>
          <view class="text-[24rpx] text-[#FF4D4F] font-bold">+¥1,280</view>
        </view>
        <view class="flex-1 bg-white rounded-[24rpx] shadow-md p-[24rpx] flex flex-col items-center cursor-pointer" @click="handleCardClick('business')">
          <IconFont name="building" class="text-[64rpx] text-[#165DFF] mb-[8rpx]" />
          <text class="text-[26rpx] text-[#333] mb-[4rpx]">企业端会员</text>
          <text class="text-[30rpx] font-bold text-[#165DFF] mb-[4rpx]">24家</text>
          <view class="text-[24rpx] text-[#FF4D4F] font-bold">+¥8,750</view>
        </view>
        <view class="flex-1 bg-white rounded-[24rpx] shadow-md p-[24rpx] flex flex-col items-center cursor-pointer" @click="handleCardClick('skill')">
          <IconFont name="graduation-cap" class="text-[64rpx] text-[#165DFF] mb-[8rpx]" />
          <text class="text-[26rpx] text-[#333] mb-[4rpx]">技能传承商</text>
          <text class="text-[30rpx] font-bold text-[#165DFF] mb-[4rpx]">16家</text>
          <view class="text-[24rpx] text-[#999] font-bold">--</view>
        </view>
      </view>
    </view>

    <!-- 数据筛选 -->
    <view class="flex gap-x-[24rpx] bg-white rounded-[24rpx] p-[16rpx_32rpx] mt-[24rpx] mx-[24rpx] shadow-sm">
      <view 
        v-for="(item, index) in filterItems" 
        :key="index"
        class="flex flex-col items-center flex-1 cursor-pointer"
        :class="{ 'text-[#165DFF] font-bold': activeFilter === index, 'text-[#999]': activeFilter !== index }"
        @click="changeFilter(index)"
      >
        <IconFont :name="item.icon" class="text-[40rpx] mb-[4rpx]" />
        <text class="text-[24rpx]">{{ item.label }}</text>
      </view>
    </view>

    <!-- 明细表格 -->
    <view class="bg-white rounded-[24rpx] shadow-md p-[24rpx] mt-[24rpx] mx-[24rpx] flex-1 flex flex-col">
      <view class="flex justify-between items-center mb-[16rpx]">
        <view class="text-[30rpx] font-bold">推广明细</view>
        <picker mode="date" :value="selectedDate" @change="handlePickerChoose">
          <view class="flex items-center text-[24rpx] text-[#165DFF] cursor-pointer">
            <text>{{ selectedDate }}</text>
            <IconFont name="chevron-down" class="text-[32rpx] ml-[4rpx]" />
          </view>
        </picker>
      </view>
      <view class="flex w-full border-b border-[#eee] pb-[8rpx] mb-[8rpx]">
        <text class="flex-1 text-[24rpx] font-bold text-[#333]">日期</text>
        <text class="flex-1 text-[24rpx] font-bold text-[#333]">推广对象</text>
        <text class="flex-1 text-[24rpx] font-bold text-[#333]">类型</text>
        <text class="flex-1 text-[24rpx] font-bold text-[#333] text-right">佣金</text>
      </view>
      <view 
        v-for="(item, index) in promotionList" 
        :key="index"
        class="flex w-full items-center py-[12rpx] border-b border-[#f5f5f5] cursor-pointer"
        @click="handleRowClick(item)"
      >
        <text class="flex-1 text-[24rpx] text-[#666]">{{ item.date }}</text>
        <text class="flex-1 text-[24rpx] text-[#666]">{{ item.target }}</text>
        <text class="flex-1 text-[24rpx]">
          <view class="inline-block px-[12rpx] py-[4rpx] rounded-[8rpx]" :class="item.type === 'personal' ? 'bg-[#e6f7ff] text-[#165DFF]' : item.type === 'business' ? 'bg-[#fff7e6] text-[#fa8c16]' : 'bg-[#f6ffed] text-[#52c41a]'">
            {{ item.type === 'personal' ? '个人端' : item.type === 'business' ? '企业端' : '技能传承' }}
          </view>
        </text>
        <text class="flex-1 text-[24rpx] text-[#FF4D4F] text-right font-bold">{{ item.reward }}</text>
      </view>
    </view>

    <!-- 佣金规则说明 -->
    <view class="bg-white rounded-[24rpx] shadow-md p-[24rpx] mt-[24rpx] mx-[24rpx]">
      <view class="text-[30rpx] font-bold mb-[16rpx]">佣金规则说明</view>
      <view class="flex items-start mb-[16rpx]">
        <IconFont name="user-friends" class="text-[40rpx] text-[#165DFF] mr-[16rpx]" />
        <view class="flex-1">
          <text class="text-[26rpx] font-bold">个人端会员推广</text>
          <text class="block text-[24rpx] text-[#666] mt-[4rpx]">每成功推广1名个人付费用户，可获得<text class="text-[#FF4D4F] font-bold">10元</text>固定奖励。奖励在用户完成付费后实时发放。</text>
        </view>
      </view>
      <view class="flex items-start mb-[16rpx]">
        <IconFont name="building" class="text-[40rpx] text-[#fa8c16] mr-[16rpx]" />
        <view class="flex-1">
          <text class="text-[26rpx] font-bold">企业端会员推广</text>
          <text class="block text-[24rpx] text-[#666] mt-[4rpx]">每成功推广1家企业付费用户，可获得该企业<text class="text-[#FF4D4F] font-bold">实际付费金额×35%</text>的佣金奖励。押金部分不计提佣金。</text>
        </view>
      </view>
      <view class="flex items-start">
        <IconFont name="graduation-cap" class="text-[40rpx] text-[#52c41a] mr-[16rpx]" />
        <view class="flex-1">
          <text class="text-[26rpx] font-bold">技能传承商推广</text>
          <text class="block text-[24rpx] text-[#666] mt-[4rpx]">成功推广技能传承商目前仅记录数量，具体佣金政策将在后续公布。请关注平台通知。</text>
        </view>
      </view>
    </view>

    <!-- 日期选择器：使用原生 picker 触发 -->

  </view>
</template>

<script>
import { ref, reactive } from 'vue';
import { IconFont } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';

export default {
  components: {
    IconFont
  },
  setup() {
    // 数据筛选选项
    const filterItems = ref([
      { icon: 'calendar-day', label: '今日' },
      { icon: 'calendar-week', label: '本周' },
      { icon: 'calendar-alt', label: '本月' },
      { icon: 'history', label: '历史' }
    ]);
    const activeFilter = ref(0);
    
    // 推广明细数据
    const promotionList = ref([
      { date: '07/12', target: '李** (138****5678)', type: 'personal', reward: '+¥10' },
      { date: '07/12', target: '王** (139****1234)', type: 'personal', reward: '+¥10' },
      { date: '07/12', target: '张** (137****8765)', type: 'personal', reward: '+¥10' },
      { date: '07/12', target: '陈** (136****4321)', type: 'personal', reward: '+¥10' },
      { date: '07/12', target: '刘** (135****9876)', type: 'personal', reward: '+¥10' },
      { date: '07/12', target: '上海创科有限公司', type: 'business', reward: '+¥1,050' },
      { date: '07/12', target: '未来教育科技', type: 'business', reward: '+¥1,400' },
      { date: '07/12', target: '精英技能传承中心', type: 'skill', reward: '--' }
    ]);
    
    // 日期选择相关
    const dateValue = ref('')
    // 使用默认起止日期
    const selectedDate = ref(formatDate(new Date()))
    function formatDate(date) {
      if (!date) return '';
      const y = date.getFullYear();
      const m = (date.getMonth() + 1).toString().padStart(2, '0');
      const d = date.getDate().toString().padStart(2, '0');
      return `${y}-${m}-${d}`;
    }
    // 获取当前日期字符串（格式：YYYY-MM-DD）
    function getTodayString() {
      const today = new Date()
      const year = today.getFullYear()
      const month = String(today.getMonth() + 1).padStart(2, '0')
      const day = String(today.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
    
    const handlePickerChoose = (e) => {
      const v = e?.detail?.value ?? e?.target?.value ?? ''
      if (v) {
        dateValue.value = v
        selectedDate.value = v
      }
    }
    
    // 底部导航
    const footerItems = ref([
      { icon: 'home', label: '首页' },
      { icon: 'chart-line', label: '统计' },
      { icon: 'share-alt', label: '推广' },
      { icon: 'wallet', label: '收益' },
      { icon: 'user', label: '我的' }
    ]);
    const activeTab = ref(2);
    
    // 事件处理
    const handleBack = () => {
      Taro.navigateBack();
    };
    
    const changeFilter = (index) => {
      activeFilter.value = index;
      Taro.showToast({
        title: `切换到${filterItems.value[index].label}数据`,
        icon: 'none'
      });
    };
    
    const handleCardClick = (type) => {
      let typeName = '';
      if (type === 'personal') typeName = '个人端';
      else if (type === 'business') typeName = '企业端';
      else typeName = '技能传承商';
      
      Taro.showToast({
        title: `查看${typeName}详细数据`,
        icon: 'none'
      });
    };
    
    const handleRowClick = (item) => {
      Taro.showToast({
        title: `查看${item.target}详情`,
        icon: 'none'
      });
    };
    
    const changeTab = (index) => {
      activeTab.value = index;
      if (index !== 2) {
        Taro.showToast({
          title: `切换到${footerItems.value[index].label}页面`,
          icon: 'none'
        });
      }
    };
    
    return {
      filterItems,
      activeFilter,
      promotionList,
      showDatePicker,
      dateValue,
      minDate,
      maxDate,
      selectedDate,
      handleDateConfirm,
      footerItems,
      activeTab,
      handleBack,
      changeFilter,
      handleCardClick,
      handleRowClick,
      changeTab
    };
  }
};
</script>

<style lang="scss" scoped>
</style>